@import '../../../scss/styles.scss';

@layer payload-default {
  .payload-settings {
    position: relative;
    margin-bottom: calc(var(--base) * 2);

    h3 {
      margin: 0;
    }

    &::before,
    &::after {
      content: '';
      display: block;
      height: 1px;
      background: var(--theme-elevation-100);
      width: calc(100% + calc(var(--base) * 5));
      left: calc(var(--gutter-h) * -1);
      top: 0;
      position: absolute;
    }

    &::after {
      display: none;
      bottom: 0;
      top: unset;
    }

    margin-top: calc(var(--base) * 3);
    padding-top: calc(var(--base) * 3);
    padding-bottom: calc(var(--base) * 3);
    display: flex;
    flex-direction: column;
    gap: var(--base);

    @include mid-break {
      margin-bottom: var(--base);
      padding-top: calc(var(--base) * 2);
      margin-top: calc(var(--base) * 2);
      padding-bottom: calc(var(--base) * 2);

      &::after {
        display: block;
      }
    }
  }
}
